<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list {
            display: none;
        }
        
        .jindonggray {
            color: gray;
        }
        
        .jindongred {
            color: red;
        }
        
        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <a href="#" :class="discoloration ? 'jindonggray':'jindongred'" @mouseover="overjd" @mouseOut="outjd">手机京东</a>
            <ul :class="flag ? 'list':''">
                <!-- <ul :style="{display:flag ? 'none':''}"></ul> json字符串 内联样式-->
                <!-- 在flag前加 '!'取反 后面function中不用再写-->
                <li>无序列表1</li>
                <li>无序列表2</li>
                <li>无序列表3</li>
                <li>无序列表4</li>
                <li>无序列表5</li>
            </ul>
        </div>
    </div>

    <div id="app">
        <div class="wrap">
            <a href="#" :class="discoloration ? 'jindonggray':'jindongred'" @mouseover="overjd1" @mouseOut="outjd2">手机京东</a>
            <ul v-if="ifBoo">
                <!-- <ul :style="{display:flag ? 'none':''}"></ul> json字符串 内联样式-->
                <!-- 在flag前加 '!'取反 后面function中不用再写-->
                <li>无序列表1</li>
                <li>无序列表2</li>
                <li>无序列表3</li>
                <li>无序列表4</li>
                <li>无序列表5</li>
            </ul>
        </div>
    </div>

</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue

    createApp({
        setup() {

            const flag = ref(true)
            const discoloration = ref(true)
            const ifBoo = ref(true)

            function overjd() {
                //如果在业务逻辑中访问ref定义的数据，需要通过value属性获取
                //如果在视图层访问不需要加value，因为setup方法已经帮我们取出来了
                flag.value = false
                discoloration.value = false
            }

            function outjd() {
                flag.value = true
                discoloration.value = true
            }

            function overjd1() {
                ifBoo.value = true
            }

            function outjd2() {
                ifBoo.value = false
            }

            return {
                flag,
                overjd,
                outjd,
                discoloration,
                overjd1,
                outjd2
            }
        }
    }).mount('#app')
</script>